<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { appName, home } from '~/constants'
import pkg from '../../package.json'

definePageMeta({
  title: '关于我们', // 自定义元信息
  requiresAuth: false, // 其他自定义元信息
  layout: 'default', // 指定布局
  keepalive: true,
})
const router = useRouter()
const dependencies = ref<{ [key: string]: string }>({})

onMounted(async () => {
  dependencies.value = {
    ...pkg.devDependencies,
  }
})

function tohome() {
  window.open(home)
}

function handleMenuEvent() {
  // 如果当前路由是/about，则导航到/index
  if (router.currentRoute.value.path === '/about') {
    router.push('/')
  }
}

onMounted(() => {
  // 注册所有事件监听
  eventBus.on('upload-click', handleMenuEvent)
  eventBus.on('convert-click', handleMenuEvent)
  eventBus.on('refresh-nodes-click', handleMenuEvent)
  eventBus.on('refresh-tables-click', handleMenuEvent)
  eventBus.on('refresh-all-click', handleMenuEvent)
  eventBus.on('export-csv-click', handleMenuEvent)
  eventBus.on('export-xls-click', handleMenuEvent)
  eventBus.on('export-xlsx-click', handleMenuEvent)
})

onUnmounted(() => {
  // 组件卸载时移除所有监听器
  eventBus.off('upload-click', handleMenuEvent)
  eventBus.off('convert-click', handleMenuEvent)
  eventBus.off('refresh-nodes-click', handleMenuEvent)
  eventBus.off('refresh-tables-click', handleMenuEvent)
  eventBus.off('refresh-all-click', handleMenuEvent)
  eventBus.off('export-csv-click', handleMenuEvent)
  eventBus.off('export-xls-click', handleMenuEvent)
  eventBus.off('export-xlsx-click', handleMenuEvent)
})
</script>

<template>
  <div class="about text- h-full w-full items-center overflow-y-auto">
    <div class="text-right">
      <button text-sm m="3 t8" @click="router.push('/')">
        返回
      </button>
    </div>
    <div class="text-center">
      <el-image
        class="logo pt-4" style="padding: 5px; width: 150px; height: 150px" src="/assets/colt.svg"
        @click="tohome()"
      />
      <h1>关于 <span class="logo" @click="tohome()">{{ appName }}</span></h1>
      <p class="pl-8 pr-8">
        {{ appName }}是一个专业的JSON数据处理工具，<br>
        支持JSON数据上传、转换、节点刷新与表格预览，并提供CSV、XLS、XLSX多种格式导出功能。<br>
        项目基于Vitesse for Nuxt 3开发，借鉴了vue-pure-admin的设计理念。
      </p>
      <el-divider />
      <div class="pl-8">
        <p>本项目使用了以下依赖组件：</p>

        <ul class="pl-8 text-left">
          <li v-for="(value, key) in dependencies" :key="key">
            {{ key }}: {{ value }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.logo:hover {
  cursor: pointer;
  background-color: var(--el-color-primary-light-9);
}

.about h1 {
  color: #333;
}

.about ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* 允许换行 */
  padding: 0;
  list-style-type: none;
}

.about li {
  margin: 5px 0;
  width: 25%;
  /* 每列占 25% */
  box-sizing: border-box;
  /* 包含内边距和边框 */
  padding: 5px;
}
</style>
